CSS View Transition Capture: Element holatini saqlash orqali uzluksiz UI yaratish

Veb-ishlab chiqishning dinamik dunyosida intuitiv, sezgir va haqiqatan ham jozibali foydalanuvchi interfeyslarini yaratish juda muhimdir. Veb-ilovalar murakkabligi oshgani sari, turli ko'rinishlar yoki holatlar o'rtasida uzluksiz o'tishlarga bo'lgan talab ham ortib bormoqda. Keskin sahifa yangilanishlari yoki ko'zni charchatuvchi vizual siljishlar davri o'tdi; bugungi foydalanuvchilar o'z brauzerlarida to'g'ridan-to'g'ri ilovaga o'xshash, silliq tajribani kutishadi. Bu kutishni qondirish tarixan dasturchilar uchun katta qiyinchilik bo'lib, ko'pincha murakkab JavaScript animatsiyalari, murakkab holatni boshqarish yoki noqulay uchinchi tomon kutubxonalarini talab qilgan.

CSS View Transitions bilan tanishing – bu nafis va samarali UI o'tishlarini yaratishni soddalashtirish uchun mo'ljallangan inqilobiy veb-platforma xususiyati. View Transitions vizual o'zgarishlarni animatsiya qilish uchun kuchli mexanizmni taklif qilsa-da, uning haqiqiy yorqinligi kamroq ko'zga tashlanadigan, ammo juda ta'sirchan qobiliyatida yotadi: Element holatini saqlash (Element State Capture). Bu xususiyat shunchaki vizual o'zgarishdan tashqariga chiqadi; u elementlarning ichki holatini, foydalanuvchi kiritgan ma'lumotlardan tortib aylantirish pozitsiyalari va dinamik uslublargacha aqlli ravishda saqlab qoladi va ko'rinishlar o'zgarishi paytida haqiqatan ham uzluksiz va yoqimli foydalanuvchi tajribasini ta'minlaydi.

Ushbu keng qamrovli qo'llanma CSS View Transition Capture mexanizmlarini chuqur o'rganib chiqadi, uning zaruriyatini, ishlash tamoyillarini va butun dunyodagi dasturchilar yuqori darajada murakkab va qulay veb-ilovalarni yaratish uchun undan qanday foydalanishlari mumkinligini o'rganadi. Biz ushbu texnologiyaning UI ishlab chiqishdagi uzoq yillik muammolarni qanday hal qilishini ochib beramiz, turli loyihalar va global auditoriyalar bo'ylab amalga oshirish uchun amaliy tushunchalar va harakatga keltiruvchi strategiyalarni taklif qilamiz.

CSS View Transitions tushunchasi: Asoslar

Element State Capture'ni tahlil qilishdan oldin, CSS View Transitions tushunchasining o'zini tushunib olish muhimdir. Asosan, View Transition – bu ikki xil DOM holati o'rtasida silliq, atomik o'tishlarga imkon beruvchi brauzer tomonidan boshqariladigan mexanizmdir. Dasturchilar alohida elementlarni JavaScript yoki murakkab CSS keyfreymlari bilan qo'lda animatsiya qilish o'rniga, o'tishni e'lon qilishlari mumkin va brauzer tasvirlarni yaratish, ular o'rtasida animatsiya qilish va DOM'ni silliq yangilashning murakkab jarayonini o'z zimmasiga oladi.

View Transitions nima?

View Transitions DOM'dagi o'zgarishlarni animatsiya qilishning deklarativ usulini taqdim etadi. U ishga tushirilganda, brauzer shunchaki eski kontentni yangisiga almashtirmaydi; aksincha, u "eski" ko'rinishning tasvirini oladi, "yangi" ko'rinishni ekran tashqarisida tayyorlaydi va keyin eski va yangi ko'rinishlardagi tegishli elementlarning tasvirlari o'rtasida animatsiyani tashkil qiladi. Bu jarayon, asosiy DOM yangilanishlari murakkab yoki uzoq bo'lsa ham, o'tishlarning har doim silliq bo'lishini ta'minlaydi.

Asosiy afzallik animatsiyani DOM yangilanishidan ajratishdir. Siz DOM'ni xohlagan usulda yangilashingiz mumkin (masalan, sinflarni o'zgartirish, elementlarni qo'shish/o'chirish, inner HTML'ni yangilash) va agar siz ushbu yangilanishni View Transition ichiga o'rasangiz, brauzer o'zgarishni animatsiya qilishga harakat qiladi. Bu kodni sezilarli darajada soddalashtiradi, texnik xizmat ko'rsatishni yaxshilaydi va murakkab animatsiya vazifalarini brauzerning optimallashtirilgan renderlash quvuriga yuklash orqali samaradorlikni oshiradi.

"Snapshot" (Tasvir) kontseptsiyasi

View Transitions sehri "snapshots" (tasvirlar) kontseptsiyasiga asoslanadi. Siz ko'rinish o'tishini boshlaganingizda, brauzer DOM'ning joriy holatining rasmini (render tasvirini) oladi. Bu "eski" ko'rinish. Keyin, sizning JavaScript'ingiz DOM'ni "yangi" ko'rinishni aks ettirish uchun yangilaydi. DOM yangilanishidan so'ng darhol brauzer tegishli elementlarning yangi pozitsiyalari va uslublaridagi yana bir tasvirini oladi. Shundan so'ng o'tish ushbu ikki tasvir o'rtasida animatsiya qilinadi.

Muhimi, bular shunchaki statik tasvirlar emas. Brauzer ushbu tasvirlarni ifodalovchi bir qator pseudo-elementlar (masalan, `::view-transition-old`, `::view-transition-new`) yaratadi. Ushbu pseudo-elementlarni CSS animatsiyalari bilan nishonga olish mumkin, bu esa yuqori darajada moslashtirilgan va ifodali o'tishlarga imkon beradi. Ushbu tizim DOM keskin o'zgargan taqdirda ham foydalanuvchi keskin sakrash o'rniga uzluksiz, animatsiyalangan sayohatni idrok etishini ta'minlaydi.

`view-transition-name` xususiyati

Brauzerga qaysi elementlarni eski va yangi ko'rinishlar o'rtasida animatsiya qilish kerakligini va eng muhimi, qaysi elementlarning holatlarini saqlab qolish kerakligini aytish uchun biz `view-transition-name` CSS xususiyatidan foydalanamiz. Eski ko'rinishdagi element va yangi ko'rinishdagi element bir xil `view-transition-name` ga ega bo'lganda, brauzer ularning pozitsiyasi, o'lchami yoki tarkibi o'zgargan bo'lsa ham, mantiqan "bir xil" element ekanligini tushunadi. Keyin u ushbu ikki holat o'rtasidagi o'zgarishni animatsiya qilishga harakat qiladi.

Masalan, agar sizda ro'yxat sahifasida mahsulot rasmi bo'lsa va keyin uning tafsilotlar sahifasiga o'tsangiz, ushbu mahsulot rasmiga ikkala ko'rinishda ham bir xil `view-transition-name` ni belgilash brauzerga uning harakati va o'lchamini o'zgartirishni animatsiya qilishni aytadi va "qahramon tasviri" o'tish effektini yaratadi. `view-transition-name` bitta o'tish kontekstida noyob identifikator vazifasini bajaradi, bu brauzerga elementlarni aqlli ravishda moslashtirish va animatsiya qilish imkonini beradi. Bu murakkab ko'p bosqichli animatsiyalarni oddiy deklarativ CSS xususiyatiga aylantiradigan kuchli vositadir.

Element holatini saqlashni chuqur o'rganish

`view-transition-name` asosan vizual elementlarni animatsiya qilishdagi roli bilan tanilgan bo'lsa-da, uning funksionalligi oddiy vizual o'zgarishlardan ancha kengroqdir. Bu Element State Capture'ning asosiy tayanchi bo'lib, bu xususiyat View Transitions'ga o'tishlar davomida elementlarning vizual bo'lmagan, interaktiv va dinamik holatlarini saqlab qolish va oldinga olib borish imkonini beradi. Aynan shu yerda View Transitions oldingi animatsiya usullaridan haqiqatan ham farq qiladi.

Vizual ko'rinishdan tashqari: Holatni saqlash zarurati

Bir sahifali ilovada (SPA) shunday vaziyatni tasavvur qiling: foydalanuvchi ko'p bosqichli formani to'ldirmoqda. Ular kiritish maydoniga ma'lumot kiritadilar, so'ngra formaning boshqa bo'limiga (ehtimol xulosa sahifasiga) o'tadilar va keyin oldingi bosqichga qaytadilar. Element State Capture bo'lmasa, kiritish maydoni katta ehtimol bilan qayta o'rnatiladi va foydalanuvchini ma'lumotlarini qayta kiritishga majbur qiladi. Xuddi shunday, foydalanuvchi yarmigacha aylantirgan uzun ro'yxatni ko'rib chiqing. Tafsilotlar ko'rinishiga o'tish va keyin ro'yxatga qaytish odatda aylantirish pozitsiyasini tepaga qaytaradi va foydalanuvchining oqimini buzadi. Bu kichikdek tuyulgan muammolar foydalanuvchi tajribasini sezilarli darajada yomonlashtirishi, hafsalasi pir bo'lishiga va kognitiv yukning oshishiga olib kelishi mumkin.

An'anaviy veb-animatsiyalar asosan pozitsiya, shaffoflik yoki masshtab kabi vizual xususiyatlarga e'tibor qaratgan. Elementlarning ichki holatlarini — masalan, kiritish maydonining `value` qiymati, katakchaning `checked` holati, elementning `scrollTop` yoki `scrollLeft` qiymati, uning `focus` holati yoki dinamik ravishda qo'llanilgan CSS maxsus xususiyatlarini saqlab qolish murakkab vazifa edi. Dasturchilar bu holatlarni DOM yangilanishidan oldin JavaScript'da qo'lda saqlab olishlari va keyin yangi ko'rinish render qilinganidan keyin ularni sinchkovlik bilan qayta qo'llashlari kerak edi. Bu xatolarga moyil, samaradorlikka salbiy ta'sir ko'rsatadigan va ayniqsa, turli tarmoq sharoitlari va qurilma imkoniyatlariga ega global ilovalarda miltillash yoki nomuvofiqliklarga olib keladigan jarayon edi.

Element State Capture bu muammoni bevosita hal qiladi. `view-transition-name` orqali o'tish paytida elementni bog'lash orqali, brauzer nafaqat uning vizual xususiyatlarini animatsiya qiladi, balki ba'zi muhim vizual bo'lmagan holatlarni ham aqlli ravishda saqlaydi va qayta qo'llaydi. Bu, asosiy ilova holati yoki DOM o'zgarishlari qanchalik murakkab bo'lishidan qat'i nazar, ancha ishonchli, bashorat qilinadigan va yoqimli foydalanuvchi tajribasiga olib keladi.

Holatni saqlash ichki tomondan qanday ishlaydi

Elementda `view-transition-name` bo'lsa va u "eski" va "yangi" DOM holatlarida paydo bo'lsa, brauzer murakkab saqlash jarayonini amalga oshiradi. U shunchaki oddiy skrinshot olmaydi. Buning o'rniga, u eski va yangi nusxalar uchun "element tasviri" deb hisoblash mumkin bo'lgan narsani yaratadi. Bu tasvir nafaqat pikselli ma'lumotlar haqida; u shuningdek, elementning holatini belgilaydigan asosiy xususiyatlarni ham o'z ichiga oladi.

Holatni saqlash mexanizmi brauzerning elementlarni render qilish va yangilash usuli bilan chambarchas bog'liq. `document.startViewTransition()` chaqirilganda, brauzer DOM yangilanishining render qilinishini samarali ravishda to'xtatadi va boshlang'ich holatning tasvirini oladi. Bunga joylashuv, chizish va eng muhimi, `view-transition-name` bilan belgilangan elementlarning ba'zi semantik holatlari kiradi. DOM sizning JavaScript'ingiz tomonidan yangilanganidan so'ng, xuddi shu elementlarning (bir xil `view-transition-name` bilan) yangi holatidagi yana bir tasviri olinadi. Keyin brauzer animatsiya paytida ushbu saqlangan holatlar o'rtasida interpolyatsiya qiladi.

Ushbu jarayon yuqori darajada optimallashtirilgan. U joylashuvning beqarorligini minimallashtirishga qaratilgan va hatto murakkab ichki holatlarga ega elementlar ham dasturchidan keng ko'lamli qo'lda holatni boshqarishni talab qilmasdan silliq o'tishini ta'minlaydi. Asosiy narsa shundaki, brauzer bu holatlarni DOM yangilanishidan *oldin* saqlab oladi, bu esa ularni o'tishdagi kontentni ifodalovchi `::view-transition-old` yoki `::view-transition-new` pseudo-elementlariga qayta qo'llash imkonini beradi.

Foydalanuvchi kiritgan ma'lumotlarni saqlash va asrash

Element State Capture'ning eng tez va ta'sirchan afzalliklaridan biri bu forma maydonlaridagi foydalanuvchi kiritgan ma'lumotlarni saqlab qolishdir. Kiritish elementlari (``, ``, `<select>`) agar ular bir xil `view-transition-name` ga ega bo'lsa, o'tish paytida o'zlarining `value` atributini saqlab qoladilar.</p> <p>Xalqaro sayohat uchun buyurtma berishda ko'p qismli formani to'ldirayotgan foydalanuvchini tasavvur qiling. Ular bir bosqichda ismini, elektron pochtasini va manzilini kiritishi mumkin. Agar ular tanlovlarini ko'rib chiqish uchun o'tib, so'ngra tafsilotlarni tahrirlash uchun orqaga qaytishga qaror qilsalar, an'anaviy yondashuv oldingi ko'rinishni qayta renderlashda forma maydonlarini tozalab yuborishi mumkin, bu esa ma'lumotlarning yo'qolishiga olib keladi. `view-transition-name` va Element State Capture yordamida brauzer kiritilgan qiymatlarni uzluksiz olib o'tadi. Foydalanuvchining kiritgan ma'lumotlari saqlanib qoladi, bu esa haqiqatan ham uzluksiz va ishonchli forma to'ldirish tajribasini ta'minlaydi, bu ma'lumotlarni kiritish ish jarayonining muhim qismi bo'lishi mumkin bo'lgan global foydalanuvchilarga xizmat ko'rsatadigan ilovalar uchun juda muhimdir.</p> <p>Bu imkoniyat murakkab formalar va interaktiv komponentlar uchun ishlab chiqishni sezilarli darajada soddalashtiradi, chunki dasturchilar endi ko'rinishlar o'zgarishi paytida kiritilgan qiymatlarni saqlash va tiklash uchun maxsus JavaScript yozishlari shart emas.</p> <h3>Aylantirish pozitsiyalari va fokusni saqlash</h3> <p>Veb-navigatsiyadagi yana bir keng tarqalgan muammo bu ko'rinishlar o'rtasida o'tish paytida aylantirish pozitsiyasi yoki fokusning yo'qolishi, ayniqsa uzun aylantiriladigan kontent yoki murakkab interaktiv elementlarga ega ilovalarda. Mahsulotlar katalogini ko'rib chiqayotgan, yuzlab elementlarni aylantirayotgan foydalanuvchini tasavvur qiling. Biror elementni bosib uning tafsilotlarini ko'rish va keyin orqaga qaytish tugmasi yoki maxsus navigatsiya elementi yordamida katalogga qaytish odatda aylantirish pozitsiyasini qayta o'rnatib, foydalanuvchini o'z joyini qayta topishga majbur qiladi. Bu, ayniqsa, mobil qurilmalardagi yoki interneti sekinroq hududlardagi foydalanuvchilar uchun noqulay, chunki katta ro'yxatlarni qayta aylantirish qiyin bo'lishi mumkin.</p> <p>Element State Capture aylantiriladigan konteynerga (masalan, `overflow: auto` xususiyatiga ega `div` yoki hatto `body`ning o'ziga) qo'llanilganda, uning `scrollTop` va `scrollLeft` xususiyatlarini saqlab qolishi mumkin. Agar aylantiriladigan elementda `view-transition-name` bo'lsa, uning aylantirish pozitsiyasi o'tish paytida saqlanib qoladi, bu esa foydalanuvchi ushbu ko'rinishga qaytganida, ular to'xtagan joylariga tushishini ta'minlaydi. Xuddi shunday, agar biror element fokuslangan bo'lsa (masalan, kiritish maydoni yoki tugma), uning `focus` holati ham saqlanib qolishi mumkin, bu esa klaviatura orqali navigatsiyani va qulaylikni oshiradi, bu esa turli xil kiritish usullari va qulaylik ehtiyojlariga ega global foydalanuvchilar uchun asosiy e'tibor hisoblanadi.</p> <h3>Dinamik CSS xususiyatlari va maxsus xususiyatlarni saqlash</h3> <p>Veb tobora dinamik bo'lib bormoqda, elementlarning uslublari ko'pincha JavaScript tomonidan o'zgartiriladi yoki foydalanuvchi harakatlariga javob beradi. CSS maxsus xususiyatlari (o'zgaruvchilar) ushbu dinamik uslublarni boshqarishda markaziy o'rin tutadi. Element State Capture bularga ham taalluqlidir. Agar elementning uslubi, shu jumladan uning CSS maxsus xususiyatlari, o'tish paytida o'zgarsa va unda `view-transition-name` bo'lsa, bu uslublar saqlanib qoladi.</p> <p>Bu shuni anglatadiki, agar siz CSS o'zgaruvchilaridan ilova temasini (masalan, yorug'/qorong'u rejim) boshqarish uchun yoki komponentga xos holatlarni (masalan, kengaytirilgan akkordeon elementining balandligi) boshqarish uchun foydalanayotgan bo'lsangiz, brauzer bu qiymatlarni o'tish paytida saqlab qolishi mumkin. Masalan, agar komponentning `transform` xususiyati CSS o'zgaruvchisi orqali sozlanayotgan bo'lsa, saqlash vizual o'zgarishning yangi ko'rinish o'z uslublarini qo'llashidan oldin standart holatga qaytish o'rniga, ko'rinish o'tishi davomida silliq davom etishini ta'minlaydi. Bu dasturchilarga kamroq harakat bilan yuqori darajada murakkab, ma'lumotlarga asoslangan animatsiyalar yaratish imkonini beradi, bu esa xalqaro bozorlarda noyob brending va UI izchilligini ta'minlaydi.</p> <h3>SVG va Canvas elementlarining holati</h3> <p>Boy grafikalar, interaktiv diagrammalar yoki maxsus vizualizatsiyalarga ko'p tayanadigan ilovalar uchun View Transitions SVG va Canvas kabi murakkab elementlar uchun ham holatni saqlashni osonlashtirishi mumkin. Canvas'ning butun ichki holati odatda saqlanmasa-da (chunki u mohiyatan bit xaritasi), SVG elementining DOM atributlari va uslublari saqlanadi. Agar SVG elementida ko'rinish holatlari o'rtasida o'zgaradigan dinamik atributlar yoki uslublar bo'lsa va unda `view-transition-name` bo'lsa, bu o'zgarishlar uzluksiz animatsiya qilinishi mumkin.</p> <p>Misol uchun, agar sizda foydalanuvchi harakatiga qarab rangini yoki shaklini o'zgartiradigan SVG belgisi bo'lsa va bu belgi ekranning boshqa qismiga o'tayotgan bo'lsa, uning vizual holati (rangi, chiziq kengligi, o'zgarishi) saqlanishi va animatsiya qilinishi mumkin. Bu vizual jihatdan boy va interaktiv ma'lumotlar panellari, o'yin interfeyslari yoki murakkab grafikalarni noqulay JavaScript qayta renderlashisiz yoki miltillashsiz silliq o'tkazishi kerak bo'lgan ta'lim mazmunini yaratish uchun yangi imkoniyatlar ochadi, bu esa dunyoning istalgan joyidagi har qanday qurilmada izchil tajribani taqdim etadi.</p> <h3>JavaScript tomonidan boshqariladigan holatlarni saqlash</h3> <p>View Transitions ko'p narsani deklarativ tarzda bajarsa-da, JavaScript uchun saqlash jarayoniga ta'sir qilish va uni yaxshilash imkoniyati hali ham mavjud. Dasturchilar brauzer "eski" tasvirni olishidan oldin yoki "yangi" DOM render qilinganidan keyin, lekin uning tasviri olinishidan oldin darhol harakatlarni bajarishlari mumkin. Bu qaysi aniq holatlar saqlanishi yoki elementlarning o'tishga qanday tayyorlanishi ustidan yanada nozikroq nazorat qilish imkonini beradi.</p> <p>Masalan, siz ma'lum bir animatsiya boshlanish holatini ta'minlash uchun eski tasvir olinishidan oldin ma'lum bir CSS maxsus xususiyatini ma'lum bir qiymatga majburlashni xohlashingiz mumkin. Yoki, yangi DOM render qilinganidan keyin, yakuniy tasvir olinishidan oldin ba'zi ilova mantiqiga asoslanib elementning holatini sozlashingiz mumkin, bu esa animatsiyaning mo'ljallangan yakuniy holatni to'g'ri aks ettirishini ta'minlaydi. CSS va JavaScript o'rtasidagi bu o'zaro ta'sir dasturchilarga o'tishlarni va holatni saqlashni o'z ilovalarining maxsus talablariga muvofiq sozlash uchun maksimal moslashuvchanlikni taklif qiladi, bu esa uni butun dunyo bo'ylab turli xil UI naqshlari va o'zaro ta'sir modellariga moslashtirish imkonini beradi.</p> <h2>View Transition pseudo-elementlari va ularning saqlashdagi roli</h2> <p>Brauzer View Transition paytida pseudo-elementlardan qanday foydalanishini tushunish animatsiyani sozlash va holatni saqlashning chuqurligini anglash uchun juda muhimdir. View Transition sodir bo'lganda, brauzer shunchaki haqiqiy DOM elementlarini to'g'ridan-to'g'ri animatsiya qilmaydi. Buning o'rniga, u eski va yangi holatlarni ifodalovchi vaqtinchalik, qatlamli pseudo-elementlar tuzilmasini yaratadi. Aynan shu pseudo-elementlarda saqlangan holatlar namoyon bo'ladi va animatsiya qilinadi.</p> <h3><code>::view-transition</code>: Global konteyner</h3> <p>`::view-transition` pseudo-elementi barcha View Transition animatsiyalari uchun yuqori darajadagi konteynerdir. U butun o'tish jarayonini o'rab oladi. Siz ushbu pseudo-elementni butun o'tishga ta'sir qiluvchi global uslublar yoki animatsiyalarni, masalan, butun sahifa uchun xiralashib paydo bo'lish yoki yo'qolish effektini qo'llash yoki o'tish vaqti yoki davomiyligining turli jihatlarini boshqaradigan CSS maxsus xususiyatlarini o'rnatish uchun nishonga olishingiz mumkin. U elementga xos holatlarni bevosita saqlamasa-da, u boshqa barcha saqlangan elementlar va ularning animatsiyalari sodir bo'ladigan kontekstni ta'minlaydi.</p> <p>Masalan, `::view-transition` ga `animation-duration` qo'llash keyingi barcha o'tish bilan bog'liq pseudo-elementlarning ushbu global vaqtga rioya qilishini ta'minlaydi, bu esa turli mintaqalar va qurilmalarda yagona va bashorat qilinadigan foydalanuvchi tajribasini yaratadi.</p> <h3><code>::view-transition-group(...)</code>: Mustaqil elementlarni boshqarish</h3> <p>`view-transition-name` tayinlangan har bir element uchun brauzer `::view-transition-group(...)` pseudo-elementini yaratadi. Bu guruh o'sha nomlangan elementning tasviri uchun konteyner vazifasini bajaradi. `(...)` qismi siz tayinlagan nomni o'z ichiga oladi (masalan, `::view-transition-group(my-hero-image)`). Ushbu pseudo-element asosan elementning geometriyasini (pozitsiyasi va o'lchami) saqlab qoladi va o'tish paytida ushbu xususiyatlarni animatsiya qilish imkonini beradi.</p> <p>`::view-transition-group`ning o'zi bevosita kiritish maydonining `value` qiymatini yoki aylantiriladigan maydonning `scrollTop` qiymatini saqlamaydi. Buning o'rniga, u elementning vizual tasvirining, shu jumladan uning `::view-transition-image-pair` ichidagi har qanday saqlangan holatlarning to'g'ri harakatlanishi va o'lchamini o'zgartirishini ta'minlaydi. Bu alohida element o'tishlari uchun sahna menejeri bo'lib, har bir nomlangan elementning eski pozitsiyasidan yangi pozitsiyasiga silliq o'tishini ta'minlaydi va yagona uzluksiz element illyuziyasini saqlab qoladi.</p> <h3><code>::view-transition-image-pair(...)</code>: Eski va Yangi</h3> <p>Har bir `::view-transition-group(...)` ichida brauzer `::view-transition-image-pair(...)` pseudo-elementini yaratadi. Ushbu pseudo-element boshqa ikkita pseudo-elementning to'plamidir: `::view-transition-old(...)` va `::view-transition-new(...)`. `image-pair` elementning eski va yangi vizual holatlari o'rtasidagi o'zaro xiralashuv yoki aralashuvni boshqarish uchun mas'uldir. Bu holatni saqlashning vizual jihati ishga tushadigan muhim nuqtadir.</p> <p>Standart bo'yicha, `::view-transition-old` xiralashib yo'qoladi va `::view-transition-new` paydo bo'ladi, bu silliq o'zaro almashinuv effektini yaratadi. Dasturchilar bu xatti-harakatni sozlash uchun `image-pair` ni nishonga olishlari mumkin, masalan, birini sirg'alib chiqishini va ikkinchisini sirg'alib kirishini yoki murakkabroq aralashtirish rejimlarini qo'llash orqali. Aynan shu juftlik ichida saqlangan *ma'lumotlarning* (masalan, kiritilgan qiymatlar yoki aylantirish pozitsiyalari) vizual tasviri ko'rsatiladi va animatsiya qilinadi.</p> <h3><code>::view-transition-old(...)</code>: Chiqib ketayotgan tasvir</h3> <p>Ushbu pseudo-element DOM yangilanishidan *oldin* element qanday ko'rinishda bo'lganligining tasvirini ifodalaydi. Bu foydalanuvchi dastlab xiralashib yo'qolayotganini ko'radigan narsadir. Eng muhimi, agar asl elementda saqlangan ichki holat (masalan, kiritilgan qiymat yoki aylantirish pozitsiyasi) bo'lsa, bu holat ushbu pseudo-elementning vizual tasvirida aks etadi. Masalan, agar matnli kiritish maydoni saqlangan bo'lsa, `::view-transition-old` o'z tasvirining bir qismi sifatida o'sha matnni ko'rsatadi.</p> <p>Siz chiqib ketayotgan elementning qanday yo'qolishini boshqarish uchun `::view-transition-old` ga CSS animatsiyalarini qo'llashingiz mumkin. Standart bo'yicha u xiralashib yo'qoladi, lekin siz uni sirg'alish, masshtabini o'zgartirish yoki boshqa har qanday CSS transformatsiyasini qo'llash uchun animatsiya qilishingiz mumkin. Bu eski holatning xayrlashuv animatsiyasi ustidan nozik nazoratni ta'minlaydi va uning umumiy foydalanuvchi tajribasi bilan mukammal integratsiyalashuvini ta'minlaydi.</p> <h3><code>::view-transition-new(...)</code>: Kirib kelayotgan tasvir</h3> <p>Aksincha, `::view-transition-new(...)` DOM yangilanishidan *keyin* elementning tasvirini ifodalaydi. Bu foydalanuvchi xiralashib paydo bo'layotganini yoki o'z joyiga animatsiya bilan kirib kelayotganini ko'radigan narsadir. O'z hamkasbi kabi, agar asl elementda saqlangan holat bo'lsa, `::view-transition-new` o'sha holatni ko'rsatadi. Masalan, agar kiritish maydonining qiymati DOM yangilanishi paytida o'zgargan bo'lsa (yoki eski holatdan saqlanib qolgan bo'lsa), `::view-transition-new` yangilangan yoki saqlangan qiymatni ko'rsatadi.</p> <p>Ushbu pseudo-element ham yangi elementning qanday paydo bo'lishini boshqarish uchun CSS bilan animatsiya qilinishi mumkin. Standart bo'yicha u paydo bo'ladi, lekin u `::view-transition-old` bilan birgalikda sirg'alish, masshtabini o'zgartirish yoki o'zgartirish uchun moslashtirilishi mumkin, bu esa haqiqatan ham maxsus o'tishni yaratadi. Ham eski, ham yangi tasvirlarni CSS animatsiyalari bilan boshqarish qobiliyati dasturchilarga noyob va jozibali UI tajribalarini yaratish uchun ulkan kuch beradi, foydalanuvchining joylashuvi yoki qurilmasidan qat'i nazar, brend izchilligi va dizayn tilining saqlanishini ta'minlaydi.</p> <h2>Amaliy qo'llash va kod misollari</h2> <p>Element State Capture kuchini to'liq anglash uchun, keling, ba'zi amaliy misollarni ko'rib chiqaylik. Ushbu stsenariylar zamonaviy veb-ilovalarda keng tarqalgan va View Transitions'ning ilgari murakkab bo'lgan animatsiya va holatni boshqarish vazifalarini qanday soddalashtirishini ko'rsatadi.</p> <h3>View Transition uchun asosiy sozlash</h3> <p>Har qanday View Transition'ni yoqishning asosiy qadami bu DOM yangilanishini `document.startViewTransition()` ichiga o'rashdir:</p> <div class="code-block-wrapper"> <pre data-language="code"> <code>// JavaScript faylingizda function updateDOM() { // DOM'ni yangilash uchun kodingiz shu yerga yoziladi // masalan, innerHTML'ni o'zgartirish, elementlarni qo'shish/o'chirish, uslublarni yangilash document.getElementById('content').innerHTML = ` <h2>Yangi kontent</h2> <p>Bu yangilangan kontent.</p> `; } // Ko'rinish o'tishini ishga tushirish document.startViewTransition(() => updateDOM()); </code> <div class="copy-button-container"> <button data-code="Ly8gSmF2YVNjcmlwdCBmYXlsaW5naXpkYQpmdW5jdGlvbiB1cGRhdGVET00oKSB7CiAgLy8gRE9NJ25pIHlhbmdpbGFzaCB1Y2h1biBrb2RpbmdpeiBzaHUgeWVyZ2EgeW96aWxhZGkKICAvLyBtYXNhbGFuLCBpbm5lckhUTUwnbmkgbyd6Z2FydGlyaXNoLCBlbGVtZW50bGFybmkgcW8nc2hpc2gvbydjaGlyaXNoLCB1c2x1Ymxhcm5pIHlhbmdpbGFzaAogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjb250ZW50JykuaW5uZXJIVE1MID0gYAogICAgPGgyPllhbmdpIGtvbnRlbnQ8L2gyPgogICAgPHA+QnUgeWFuZ2lsYW5nYW4ga29udGVudC48L3A+CiAgYDsKfQoKLy8gS28ncmluaXNoIG8ndGlzaGluaSBpc2hnYSB0dXNoaXJpc2gKZG9jdW1lbnQuc3RhcnRWaWV3VHJhbnNpdGlvbigoKSA9PiB1cGRhdGVET00oKSk7Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p>Ushbu oddiy naqsh brauzerga shunday deydi: "Men hozir DOM'ni o'zgartirmoqchiman. Iltimos, eski holatni saqlab ol, mening o'zgarishlarimni qo'lla, so'ngra yangi holatni saqlab ol va ular o'rtasida animatsiya yarat." Holatni saqlash sehri `view-transition-name` `updateDOM()` ichidagi ma'lum elementlarga yoki ikkala holatda ham saqlanib qoladigan elementlarga qo'llanilganda sodir bo'ladi.</p> <h3>1-misol: Forma kiritish holatini saqlash</h3> <p>Foydalanuvchi kiritish maydonini to'ldiradigan va keyin sahifaning bir qismi dinamik ravishda o'zgaradigan, lekin kiritish maydoni o'z joyida qoladigan vaziyatni ko'rib chiqaylik. Biz kiritilgan ma'lumotning saqlanishini istaymiz.</p> <h4>HTML strukturasi:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <div id="dynamic-content"> <p>Boshlang'ich sahifa kontenti.</p> </div> <input type="text" id="my-input" placeholder="Biror narsa kiriting..."> <button id="update-button">Kontentni yangilash</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPGRpdiBpZD0iZHluYW1pYy1jb250ZW50Ij4KICAgIDxwPkJvc2hsYW5nJ2ljaCBzYWhpZmEga29udGVudGkuPC9wPgogIDwvZGl2PgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibXktaW5wdXQiIHBsYWNlaG9sZGVyPSJCaXJvciBuYXJzYSBraXJpdGluZy4uLiI+CiAgPGJ1dHRvbiBpZD0idXBkYXRlLWJ1dHRvbiI+S29udGVudG5pIHlhbmdpbGFzaDwvYnV0dG9uPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4><code>view-transition-name</code> bilan CSS:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Kiritish elementiga view-transition-name belgilash */ #my-input { view-transition-name: input-field-id; border: 1px solid #ccc; padding: 8px; width: 250px; border-radius: 4px; } /* Ixtiyoriy: o'tish uchun ba'zi asosiy uslublarni qo'shish */ ::view-transition-old(input-field-id), ::view-transition-new(input-field-id) { animation-duration: 0.3s; animation-timing-function: ease-in-out; } ::view-transition-old(input-field-id) { animation-name: fade-out; } ::view-transition-new(input-field-id) { animation-name: fade-in; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } </code> <div class="copy-button-container"> <button data-code="LyogS2lyaXRpc2ggZWxlbWVudGlnYSB2aWV3LXRyYW5zaXRpb24tbmFtZSBiZWxnaWxhc2ggKi8KI215LWlucHV0IHsKICB2aWV3LXRyYW5zaXRpb24tbmFtZTogaW5wdXQtZmllbGQtaWQ7CiAgYm9yZGVyOiAxcHggc29saWQgI2NjYzsKICBwYWRkaW5nOiA4cHg7CiAgd2lkdGg6IDI1MHB4OwogIGJvcmRlci1yYWRpdXM6IDRweDsKfQoKLyogSXh0aXlvcml5OiBvJ3Rpc2ggdWNodW4gYmEnemkgYXNvc2l5IHVzbHVibGFybmkgcW8nc2hpc2ggKi8KOjp2aWV3LXRyYW5zaXRpb24tb2xkKGlucHV0LWZpZWxkLWlkKSwKOjp2aWV3LXRyYW5zaXRpb24tbmV3KGlucHV0LWZpZWxkLWlkKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjNzOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0Owp9Cgo6OnZpZXctdHJhbnNpdGlvbi1vbGQoaW5wdXQtZmllbGQtaWQpIHsKICBhbmltYXRpb24tbmFtZTogZmFkZS1vdXQ7Cn0KCjo6dmlldy10cmFuc2l0aW9uLW5ldyhpbnB1dC1maWVsZC1pZCkgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLWluOwp9CgpAa2V5ZnJhbWVzIGZhZGUtb3V0IHsKICBmcm9tIHsgb3BhY2l0eTogMTsgfQogIHRvIHsgb3BhY2l0eTogMDsgfQp9CgpAa2V5ZnJhbWVzIGZhZGUtaW4gewogIGZyb20geyBvcGFjaXR5OiAwOyB9CiAgdG8geyBvcGFjaXR5OiAxOyB9Cn0K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>O'tishni ishga tushirish uchun JavaScript:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>document.getElementById('update-button').addEventListener('click', () => { document.startViewTransition(() => { const dynamicContent = document.getElementById('dynamic-content'); // Kiritish maydoni atrofidagi kontentni o'zgartirishni simulyatsiya qilish dynamicContent.innerHTML = ` <h3>Kontent yangilandi!</h3> <p>Ushbu bo'lim yangilandi, lekin sizning kiritgan ma'lumotingiz saqlanib qoldi.</p> <ul> <li>1-element</li> <li>2-element</li> </ul> `; }); }); </code> <div class="copy-button-container"> <button data-code="ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3VwZGF0ZS1idXR0b24nKS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGNvbnN0IGR5bmFtaWNDb250ZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2R5bmFtaWMtY29udGVudCcpOwogICAgLy8gS2lyaXRpc2ggbWF5ZG9uaSBhdHJvZmlkYWdpIGtvbnRlbnRuaSBvJ3pnYXJ0aXJpc2huaSBzaW11bHlhdHNpeWEgcWlsaXNoCiAgICBkeW5hbWljQ29udGVudC5pbm5lckhUTUwgPSBgCiAgICAgIDxoMz5Lb250ZW50IHlhbmdpbGFuZGkhPC9oMz4KICAgICAgPHA+VXNoYnUgYm8nbGltIHlhbmdpbGFuZGksIGxla2luIHNpem5pbmcga2lyaXRnYW4gbWEnbHVtb3RpbmdpeiBzYXFsYW5pYiBxb2xkaS48L3A+CiAgICAgIDx1bD4KICAgICAgICA8bGk+MS1lbGVtZW50PC9saT4KICAgICAgICA8bGk+Mi1lbGVtZW50PC9saT4KICAgICAgPC91bD4KICAgIGA7CiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Holatni saqlash tushuntirishi:</strong> Ushbu misolda, `#dynamic-content` ichidagi tarkib to'liq almashtirilgan bo'lsa ham, `#my-input` ga kiritilgan matn saqlanib qoladi. `#my-input` da `view-transition-name: input-field-id` borligi sababli, brauzer uni doimiy element sifatida tan oladi. U DOM yangilanishidan oldin kiritilgan ma'lumotning `value` qiymatini saqlab oladi va yangilanishdan keyin uni qayta qo'llaydi, hatto elementning ota-onasi yoki yonidagi elementlar o'zgargan bo'lsa ham. Bu formalar va interaktiv komponentlar uchun katta o'zgarish bo'lib, atrofdagi UI ning dinamik tabiatidan qat'i nazar, foydalanuvchi uchun izchil tajribani ta'minlaydi.</p> <h3>2-misol: Holatni saqlash bilan dinamik tarkib (Ro'yxatni qayta tartiblash)</h3> <p>Tugmani bosish orqali tartibini o'zgartirish mumkin bo'lgan tartiblanadigan ro'yxatni tasavvur qiling. Biz qayta tartiblashning silliq animatsiya qilinishini, shuningdek, ro'yxatda qolgan elementlar ichidagi har qanday fokus yoki o'zaro ta'sir holatining saqlanishini istaymiz.</p> <h4>HTML strukturasi:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="app-container"> <ul id="item-list"> <li class="list-item" data-id="1">A elementi</li> <li class="list-item" data-id="2">B elementi</li> <li class="list-item" data-id="3">C elementi</li> </ul> <button id="sort-button">Ro'yxatni tartiblash (Teskari)</button> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iYXBwLWNvbnRhaW5lciI+CiAgPHVsIGlkPSJpdGVtLWxpc3QiPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjEiPkEgZWxlbWVudGk8L2xpPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjIiPkIgZWxlbWVudGk8L2xpPgogICAgPGxpIGNsYXNzPSJsaXN0LWl0ZW0iIGRhdGEtaWQ9IjMiPkMgZWxlbWVudGk8L2xpPgogIDwvdWw+CiAgPGJ1dHRvbiBpZD0ic29ydC1idXR0b24iPlJvJ3l4YXRuaSB0YXJ0aWJsYXNoIChUZXNrYXJpKTwvYnV0dG9uPgo8L2Rpdj4K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>CSS (dinamik <code>view-transition-name</code> bilan):</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>/* Har bir ro'yxat elementi JS orqali noyob view-transition-name oladi */ .list-item { padding: 10px; margin-bottom: 5px; background-color: #f0f0f0; border-radius: 4px; } /* Alohida ro'yxat elementlari uchun animatsiyalarni sozlash */ ::view-transition-group(item-*) { animation-duration: 0.5s; animation-timing-function: ease-in-out; } ::view-transition-old(item-*) { animation-name: fade-out-move; z-index: 1; } ::view-transition-new(item-*) { animation-name: fade-in-move; z-index: 2; } @keyframes fade-out-move { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } } @keyframes fade-in-move { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } to { opacity: 1; transform: translate(0, 0); } } </code> <div class="copy-button-container"> <button data-code="LyogSGFyIGJpciBybyd5eGF0IGVsZW1lbnRpIEpTIG9ycWFsaSBub3lvYiB2aWV3LXRyYW5zaXRpb24tbmFtZSBvbGFkaSAqLwoubGlzdC1pdGVtIHsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbi1ib3R0b206IDVweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjBmMGYwOwogIGJvcmRlci1yYWRpdXM6IDRweDsKfQoKLyogQWxvaGlkYSBybyd5eGF0IGVsZW1lbnRsYXJpIHVjaHVuIGFuaW1hdHNpeWFsYXJuaSBzb3psYXNoICovCjo6dmlldy10cmFuc2l0aW9uLWdyb3VwKGl0ZW0tKikgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC41czsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQoKOjp2aWV3LXRyYW5zaXRpb24tb2xkKGl0ZW0tKikgewogIGFuaW1hdGlvbi1uYW1lOiBmYWRlLW91dC1tb3ZlOwogIHotaW5kZXg6IDE7Cn0KCjo6dmlldy10cmFuc2l0aW9uLW5ldyhpdGVtLSopIHsKICBhbmltYXRpb24tbmFtZTogZmFkZS1pbi1tb3ZlOwogIHotaW5kZXg6IDI7Cn0KCkBrZXlmcmFtZXMgZmFkZS1vdXQtbW92ZSB7CiAgZnJvbSB7IG9wYWNpdHk6IDE7IHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIDApOyB9CiAgdG8geyBvcGFjaXR5OiAwOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSh2YXIoLS1keCwgMCksIHZhcigtLWR5LCAwKSk7IH0KfQoKQGtleWZyYW1lcyBmYWRlLWluLW1vdmUgewogIGZyb20geyBvcGFjaXR5OiAwOyB0cmFuc2Zvcm06IHRyYW5zbGF0ZSh2YXIoLS1keCwgMCksIHZhcigtLWR5LCAwKSk7IH0KICB0byB7IG9wYWNpdHk6IDE7IHRyYW5zZm9ybTogdHJhbnNsYXRlKDAsIDApOyB9Cn0K" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>Dinamik <code>view-transition-name</code> va qayta tartiblash uchun JavaScript:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const itemList = document.getElementById('item-list'); const sortButton = document.getElementById('sort-button'); function applyViewTransitionNames() { const items = itemList.querySelectorAll('.list-item'); items.forEach(item => { // data-id asosida view-transition-name'ni dinamik ravishda belgilash item.style.viewTransitionName = `item-${item.dataset.id}`; }); } // Dastlab nomlarni qo'llash applyViewTransitionNames(); sortButton.addEventListener('click', () => { document.startViewTransition(() => { // Joriy elementlarni olish va ularning tartibini teskari qilish const itemsArray = Array.from(itemList.children); itemsArray.reverse().forEach(item => itemList.appendChild(item)); // Agar allaqachon o'rnatilgan bo'lsa, view-transition-name'ni qayta qo'llash shart emas }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3QgaXRlbUxpc3QgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaXRlbS1saXN0Jyk7CmNvbnN0IHNvcnRCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc29ydC1idXR0b24nKTsKCmZ1bmN0aW9uIGFwcGx5Vmlld1RyYW5zaXRpb25OYW1lcygpIHsKICBjb25zdCBpdGVtcyA9IGl0ZW1MaXN0LnF1ZXJ5U2VsZWN0b3JBbGwoJy5saXN0LWl0ZW0nKTsKICBpdGVtcy5mb3JFYWNoKGl0ZW0gPT4gewogICAgLy8gZGF0YS1pZCBhc29zaWRhIHZpZXctdHJhbnNpdGlvbi1uYW1lJ25pIGRpbmFtaWsgcmF2aXNoZGEgYmVsZ2lsYXNoCiAgICBpdGVtLnN0eWxlLnZpZXdUcmFuc2l0aW9uTmFtZSA9IGBpdGVtLSR7aXRlbS5kYXRhc2V0LmlkfWA7CiAgfSk7Cn0KCi8vIERhc3RsYWIgbm9tbGFybmkgcW8nbGxhc2gKYXBwbHlWaWV3VHJhbnNpdGlvbk5hbWVzKCk7Cgpzb3J0QnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGRvY3VtZW50LnN0YXJ0Vmlld1RyYW5zaXRpb24oKCkgPT4gewogICAgLy8gSm9yaXkgZWxlbWVudGxhcm5pIG9saXNoIHZhIHVsYXJuaW5nIHRhcnRpYmluaSB0ZXNrYXJpIHFpbGlzaAogICAgY29uc3QgaXRlbXNBcnJheSA9IEFycmF5LmZyb20oaXRlbUxpc3QuY2hpbGRyZW4pOwogICAgaXRlbXNBcnJheS5yZXZlcnNlKCkuZm9yRWFjaChpdGVtID0+IGl0ZW1MaXN0LmFwcGVuZENoaWxkKGl0ZW0pKTsKICAgIC8vIEFnYXIgYWxsYXFhY2hvbiBvJ3JuYXRpbGdhbiBibydsc2EsIHZpZXctdHJhbnNpdGlvbi1uYW1lJ25pIHFheXRhIHFvJ2xsYXNoIHNoYXJ0IGVtYXMKICB9KTsKfSk7Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Tushuntirish:</strong> Har bir ro'yxat elementi o'zining `data-id` siga asoslangan noyob `view-transition-name` oladi. Ro'yxat teskari tartiblanganda, DOM elementlarining o'zi qayta tartiblanadi. Har bir elementning noyob IDsi uchun `view-transition-name` izchil qolganligi sababli, brauzer eski pozitsiyani saqlab oladi va keyin elementni yangi pozitsiyasiga animatsiya qiladi. Agar ushbu ro'yxat elementlari murakkab interaktiv elementlarni (masalan, almashtirgichlar, mini-formalar) o'z ichiga olgan bo'lsa, ularning ichki holatlari ham qayta tartiblash paytida saqlanib qoladi, bu foydalanuvchi uchun ro'yxatdagi elementlar sonidan yoki foydalanuvchining geografik joylashuvidan qat'i nazar, ishonchli va uzluksiz o'zaro ta'sirni ta'minlaydi.</p> <h3>3-misol: Aylantirish pozitsiyasini saqlashni o'zlashtirish</h3> <p>Boshqaruv panelidagi aylantiriladigan kontent maydonini ko'rib chiqaylik. Foydalanuvchi kontentni filtrlaganda, ichki kontent o'zgaradi, lekin biz foydalanuvchi pastga aylantirgan bo'lsa, filtrlanadigan maydonning aylantirish pozitsiyasi saqlanib qolishini istaymiz.</p> <h4>HTML strukturasi:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code><div id="dashboard-layout"> <nav>...</nav> <main id="scrollable-content"> <div class="filters"> <button id="filter-btn">Filtrni qo'llash</button> </div> <div id="data-display"> <!-- Ko'p dinamik yaratilgan kontent --> <p>Kontent qatori 1</p><p>Kontent qatori 2</p>...<p>Kontent qatori 100</p> </div> </main> </div> </code> <div class="copy-button-container"> <button data-code="PGRpdiBpZD0iZGFzaGJvYXJkLWxheW91dCI+CiAgPG5hdj4uLi48L25hdj4KICA8bWFpbiBpZD0ic2Nyb2xsYWJsZS1jb250ZW50Ij4KICAgIDxkaXYgY2xhc3M9ImZpbHRlcnMiPgogICAgICA8YnV0dG9uIGlkPSJmaWx0ZXItYnRuIj5GaWx0cm5pIHFvJ2xsYXNoPC9idXR0b24+CiAgICA8L2Rpdj4KICAgIDxkaXYgaWQ9ImRhdGEtZGlzcGxheSI+CiAgICAgIDwhLS0gS28ncCBkaW5hbWlrIHlhcmF0aWxnYW4ga29udGVudCAtLT4KICAgICAgPHA+S29udGVudCBxYXRvcmkgMTwvcD48cD5Lb250ZW50IHFhdG9yaSAyPC9wPi4uLjxwPktvbnRlbnQgcWF0b3JpIDEwMDwvcD4KICAgIDwvZGl2PgogIDwvbWFpbj4KPC9kaXY+Cg==" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>Kontentni aylantiriladigan qilish va <code>view-transition-name</code> qo'llash uchun CSS:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>#dashboard-layout { display: flex; height: 100vh; } #scrollable-content { flex-grow: 1; overflow-y: auto; /* Uni aylantiriladigan qilish */ padding: 20px; view-transition-name: main-content-scroll; /* Aylantirish holatini saqlash uchun kalit */ } #data-display p { margin-bottom: 10px; padding: 5px; background-color: #e6e6e6; border-radius: 3px; } /* Standart View Transition animatsiyalari */ ::view-transition-old(main-content-scroll), ::view-transition-new(main-content-scroll) { animation-duration: 0.3s; } </code> <div class="copy-button-container"> <button data-code="I2Rhc2hib2FyZC1sYXlvdXQgewogIGRpc3BsYXk6IGZsZXg7CiAgaGVpZ2h0OiAxMDB2aDsKfQoKI3Njcm9sbGFibGUtY29udGVudCB7CiAgZmxleC1ncm93OiAxOwogIG92ZXJmbG93LXk6IGF1dG87IC8qIFVuaSBheWxhbnRpcmlsYWRpZ2FuIHFpbGlzaCAqLwogIHBhZGRpbmc6IDIwcHg7CiAgdmlldy10cmFuc2l0aW9uLW5hbWU6IG1haW4tY29udGVudC1zY3JvbGw7CiAgLyogQXlsYW50aXJpc2ggaG9sYXRpbmkgc2FxbGFzaCB1Y2h1biBrYWxpdCAqLwp9CgojZGF0YS1kaXNwbGF5IHAgewogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgcGFkZGluZzogNXB4OwogIGJhY2tncm91bmQtY29sb3I6ICNlNmU2ZTY7CiAgYm9yZGVyLXJhZGl1czogM3B4Owp9CgovKiBTdGFuZGFydCBWaWV3IFRyYW5zaXRpb24gYW5pbWF0c2l5YWxhcmkgKi8KOjp2aWV3LXRyYW5zaXRpb24tb2xkKG1haW4tY29udGVudC1zY3JvbGwpLAo6OnZpZXctdHJhbnNpdGlvbi1uZXcobWFpbi1jb250ZW50LXNjcm9sbCkgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4zczsKfQo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <h4>Filtrni va kontentni yangilashni ishga tushirish uchun JavaScript:</h4> <div class="code-block-wrapper"> <pre data-language="code"> <code>const scrollableContent = document.getElementById('scrollable-content'); const dataDisplay = document.getElementById('data-display'); const filterButton = document.getElementById('filter-btn'); let filtered = false; function generateContent(isFiltered) { let content = ''; const totalLines = 100; for (let i = 1; i <= totalLines; i++) { if (!isFiltered || i % 2 === 0) { // Faqat filtrlanganda juft qatorlarni ko'rsatish content += `<p>Kontent qatori ${i} ${isFiltered ? '(Filtrlangan)' : ''}</p>`; } } return content; } // Boshlang'ich kontentni yuklash dataDisplay.innerHTML = generateContent(filtered); filterButton.addEventListener('click', () => { document.startViewTransition(() => { filtered = !filtered; // Filtr holatini o'zgartirish dataDisplay.innerHTML = generateContent(filtered); }); }); </code> <div class="copy-button-container"> <button data-code="Y29uc3Qgc2Nyb2xsYWJsZUNvbnRlbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc2Nyb2xsYWJsZS1jb250ZW50Jyk7CmNvbnN0IGRhdGFEaXNwbGF5ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2RhdGEtZGlzcGxheScpOwpjb25zdCBmaWx0ZXJCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZmlsdGVyLWJ0bicpOwoKbGV0IGZpbHRlcmVkID0gZmFsc2U7CgpmdW5jdGlvbiBnZW5lcmF0ZUNvbnRlbnQoaXNGaWx0ZXJlZCkgewogIGxldCBjb250ZW50ID0gJyc7CiAgY29uc3QgdG90YWxMaW5lcyA9IDEwMDsKICBmb3IgKGxldCBpID0gMTsgaSA8PSB0b3RhbExpbmVzOyBpKyspIHsKICAgIGlmICghaXNGaWx0ZXJlZCB8fCBpICUgMiA9PT0gMCkgeyAvLyBGYXFhdCBmaWx0cmxhbmdhbmRhIGp1ZnQgcWF0b3JsYXJuaSBrbydyc2F0aXNoCiAgICAgIGNvbnRlbnQgKz0gYDxwPktvbnRlbnQgcWF0b3JpICR7aX0gJHtpc0ZpbHRlcmVkID8gJyhGaWx0cmxhbmdhbiknIDogJyd9PC9wPmA7CiAgICB9CiAgfQogIHJldHVybiBjb250ZW50Owp9CgovLyBCb3NobGFuZydpY2gga29udGVudG5pIHl1a2xhc2gKZGF0YURpc3BsYXkuaW5uZXJIVE1MID0gZ2VuZXJhdGVDb250ZW50KGZpbHRlcmVkKTsKCmZpbHRlckJ1dHRvbi5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBkb2N1bWVudC5zdGFydFZpZXdUcmFuc2l0aW9uKCgpID0+IHsKICAgIGZpbHRlcmVkID0gIWZpbHRlcmVkOyAvLyBGaWx0ciBob2xhdGluaSBvJ3pnYXJ0aXJpc2gKICAgIGRhdGFEaXNwbGF5LmlubmVySFRNTCA9IGdlbmVyYXRlQ29udGVudChmaWx0ZXJlZCk7CiAgfSk7Cn0pOwo=" class="copy-button" title="Copy code" > Copy </button> </div> </pre> </div> <p><strong>Tushuntirish:</strong> "Filtrni qo'llash" tugmasi bosilganda, `data-display` kontenti to'liq qayta yaratiladi. Biroq, ota `scrollable-content` div'ida `view-transition-name: main-content-scroll` mavjudligi sababli, uning `scrollTop` pozitsiyasi saqlanadi va saqlab qolinadi. Agar foydalanuvchi filtrni bosishdan oldin pastga aylantirgan bo'lsa, ular kontent yangilanganidan keyin ham xuddi shu nisbiy aylantirish pozitsiyasida qoladilar, bu silliq va uzluksiz ko'rish tajribasini ta'minlaydi, ayniqsa butun dunyo bo'ylab mutaxassislar tomonidan ishlatiladigan ma'lumotlarga boy ilovalar uchun qimmatlidir.</p> <h2>Ilg'or usullar va eng yaxshi amaliyotlar</h2> <p>Element State Capture'dan samarali foydalanish shunchaki `view-transition-name` qo'llashdan iborat emas. Puxta o'ylangan tatbiq va eng yaxshi amaliyotlarga rioya qilish sizning o'tishlaringizning samarali, qulay va haqiqatan ham foydalanuvchi tajribasini yaxshilashini ta'minlaydi.</p> <h3>Murakkab o'tishlarni tashkil etish</h3> <p>`view-transition-name` ko'plab stsenariylarni soddalashtirsa-da, murakkab UIlar ko'pincha nozikroq tashkil etishni talab qiladi. Siz ko'p bosqichli o'tishlarni yaratish uchun View Transitions'ni an'anaviy CSS animatsiyalari va JavaScript bilan birlashtirishingiz mumkin:</p> <ul> <li><b>Animatsiyalarni zanjirlash:</b> Siz turli `::view-transition-*` pseudo-elementlarida yoki hatto ularning ichidagi elementlarda `animation-delay` dan foydalanib, bosqichma-bosqich animatsiyalar yaratishingiz mumkin. Masalan, qahramon tasviri avval animatsiya qilinishi, so'ngra matn kontenti sirg'alib kirishi mumkin.</li> <li><b>Maxsus vaqt funksiyalari:</b> `ease-in-out` dan tashqari, animatsiyalaringizga brendingizning global dizayn tiliga mos keladigan noyob hissiyot berish uchun maxsus `cubic-bezier()` funksiyalarini o'rganing.</li> <li><b>Dinamik `view-transition-name`:</b> Ro'yxatni qayta tartiblash misolida ko'rsatilganidek, `view-transition-name` JavaScript yordamida dinamik ravishda qo'shilishi va olib tashlanishi mumkin. Bu UI ichida paydo bo'ladigan, yo'qoladigan yoki rolini o'zgartiradigan elementlar uchun kuchli vositadir. Nomlarning o'tish paytida butun hujjat bo'ylab noyob bo'lishini ta'minlang.</li> </ul> <h3>Samaradorlik masalalari</h3> <p>View Transitions samarali bo'lish uchun mo'ljallangan bo'lib, ishni brauzerning optimallashtirilgan renderlash quvuriga yuklaydi. Biroq, ba'zi masalalar saqlanib qoladi:</p> <ul> <li><b>Katta element o'tishlarini minimallashtirish:</b> View Transitions tasvirlarni samarali boshqarsa-da, juda katta yoki ko'p sonli elementlarni animatsiya qilish hali ham samaradorlikka ta'sir qilishi mumkin. `view-transition-name` ni ehtiyotkorlik bilan, asosan noyob o'tishdan haqiqatan ham foyda ko'radigan elementlarda ishlating.</li> <li><b>Haddan tashqari DOM o'zgarishlaridan saqlanish:</b> View Transitions animatsiyani DOM yangilanishlaridan ajratib qo'ysa-da, `startViewTransition()` qayta chaqiruvidagi katta, optimallashtirilmagan DOM o'zgarishlari o'tish boshlanishidan oldin qisqa kechikishga olib kelishi mumkin. DOM yangilanishlaringizni tezlik uchun optimallashtiring.</li> <li><b>Uskunaviy tezlashtirish:</b> Uskunaviy tezlashtirishdan foyda ko'radigan xususiyatlarni (masalan, `transform` va `opacity`) animatsiya qilishni ta'minlang. View Transitions o'z-o'zidan bundan foydalanadi, lekin maxsus animatsiyalarga e'tibor berish yaxshi.</li> <li><b>Turli qurilmalarda sinovdan o'tkazish:</b> Global foydalanuvchi bazangiz uchun silliq tajribani ta'minlash uchun har doim o'tishlaringizni turli xil qurilmalarda, yuqori darajadagi ish stollaridan tortib kam quvvatli mobil qurilmalargacha sinab ko'ring.</li> </ul> <h3>Qulaylikka ta'siri</h3> <p>Go'zal o'tish faqat barcha foydalanuvchilar uchun qulay bo'lsagina samarali bo'ladi. Element State Capture bunda rol o'ynaydi, lekin boshqa jihatlarga ham e'tibor berish kerak:</p> <ul> <li><b><code>prefers-reduced-motion</code>:</b> Har doim foydalanuvchining `prefers-reduced-motion` sozlamasini hurmat qiling. CSS View Transitions kamroq harakatni afzal ko'radigan foydalanuvchilar uchun animatsiyalarni avtomatik ravishda o'chirish usulini taqdim etadi. `::view-transition-*` uchun maxsus CSS animatsiyalaringiz ham ushbu media so'rovini hurmat qilishini ta'minlang.</li> <li><b>Fokusni boshqarish:</b> Aylantirish va kiritish holatlari saqlansa-da, fokusni aniq boshqarish juda muhim bo'lishi mumkin. View Transition'dan so'ng, klaviatura fokusi yangi ko'rinishdagi mantiqiy elementga tushishini ta'minlang. Masalan, yangi sahifaga o'tayotganda, fokusni asosiy sarlavhaga o'rnating.</li> <li><b>Semantik HTML:</b> Semantik HTML'dan foydalanishni davom eting. View Transitions asosiy struktura mantiqiy va qulay bo'lganda eng yaxshi ishlaydi, bu yordamchi texnologiyalarga vizual animatsiyalardan qat'i nazar, kontentni to'g'ri talqin qilish imkonini beradi.</li> <li><b>Aniq fikr-mulohaza:</b> Silliq o'tishlar bilan ham, harakatlar uchun aniq vizual va eshitish fikr-mulohazalarini taqdim eting, ayniqsa kognitiv nuqsonlari bo'lgan yoki ekran o'quvchilaridan foydalanadigan foydalanuvchilar uchun.</li> </ul> <h3>Brauzerlararo moslik va muqobil yechimlar</h3> <p>CSS View Transitions nisbatan yangi xususiyatdir. Chromium asosidagi brauzerlarda keng qo'llab-quvvatlansa-da, boshqa brauzerlarda (masalan, Firefox va Safari) qo'llab-quvvatlash faol rivojlanmoqda. Global auditoriya uchun ishonchli strategiya progressiv takomillashtirishni o'z ichiga oladi:</p> <ul> <li><b>Xususiyatni aniqlash:</b> View Transitions'ni shartli ravishda qo'llash uchun `if (document.startViewTransition)` dan foydalaning. Agar qo'llab-quvvatlanmasa, ilovangiz kamroq animatsiyalangan tajriba bilan bo'lsa-da, to'g'ri ishlashi kerak.</li> <li><b>Silliq degradatsiya:</b> Ilovangizni View Transitions'siz ham mukammal ishlashi uchun loyihalashtiring. O'tishlar asosiy funksionallik uchun muhim bo'lmasligi, balki uni yaxshilashi kerak.</li> <li><b>Polifillar (Ehtiyotkorlik bilan):</b> Ba'zi animatsiya xususiyatlari uchun polifillar mavjud bo'lsa-da, View Transitions'ning chuqur DOM tasvirini olish va holatni saqlash uchun haqiqiy polifil murakkab va ko'pincha amaliy emas. Asosiy e'tiborni mahalliy xususiyatlarni aniqlashga qarating.</li> </ul> <h3>View Transitions'ni tuzatish (Debugging)</h3> <p>Zamonaviy brauzer ishlab chiquvchi vositalari View Transitions'ni tuzatish uchun ajoyib yordam taklif qiladi:</p> <ul> <li><b>Elementlar paneli:</b> O'tish paytida Elementlar panelidagi `::view-transition` pseudo-elementlarini tekshiring. Bu sizga `group`, `image-pair`, `old` va `new` elementlarini va ularga qo'llanilgan uslublar/animatsiyalarni ko'rish imkonini beradi.</li> <li><b>Animatsiyalar paneli:</b> Ishlab chiquvchi vositalaridagi Animatsiyalar paneli barcha faol animatsiyalarning, shu jumladan View Transitions tomonidan boshqariladiganlarning vaqt jadvalini taqdim etadi. Siz har bir animatsiya qadamini to'xtatishingiz, aylantirishingiz va tekshirishingiz mumkin.</li> <li><b>Samaradorlik paneli:</b> O'tishlar paytidagi har qanday to'siqlarni, masalan, uzoq skript bajarilish vaqtlari yoki joylashuvning beqarorligini aniqlash uchun Samaradorlik panelidan foydalaning.</li> <li><b>Konsol jurnallari:</b> Tasvirlardan oldin va keyin ilova holati va DOM o'zgarishlarini kuzatish uchun `startViewTransition()` qayta chaqiruvingiz ichida `console.log` dan foydalaning.</li> </ul> <h2>Global ta'sir va UI ishlab chiqish kelajagi</h2> <p>CSS View Transitions'ning, ayniqsa uning kuchli Element State Capture imkoniyatlari bilan joriy etilishi, veb UI ishlab chiqishda sezilarli yutuqni anglatadi. Uning ta'siri shunchaki estetikadan tashqariga chiqib, dasturchilarning xilma-xil, global foydalanuvchilar bazasi uchun murakkab interaktiv tajribalarga yondashuvini tubdan o'zgartiradi.</p> <h3>Butun dunyo bo'ylab foydalanuvchi tajribasini yaxshilash</h3> <p>Turli mamlakatlar va madaniyatlardagi foydalanuvchilar uchun izchil va silliq foydalanuvchi interfeysi universal tarzda qadrlanadi. Holatni saqlash bilan View Transitions bunga sezilarli hissa qo'shadi:</p> <ul> <li><b>Kognitiv yukni kamaytirish:</b> Kontekstni (masalan, aylantirish pozitsiyasi yoki kiritilgan qiymatlar) saqlaydigan silliq o'tishlar foydalanuvchilarning navigatsiya yoki o'zaro ta'sirdan so'ng o'zlarini qayta yo'naltirishlari uchun zarur bo'lgan aqliy harakatlarni kamaytiradi, bu esa ilovalarni yanada qulay va kamroq asabiylashtiruvchi qiladi.</li> <li><b>Idrok etilgan samaradorlikni oshirish:</b> Asosiy ma'lumotlarni olish yoki DOM yangilanishlari bir lahza vaqt olsa ham, yaxshi bajarilgan View Transition bir zumda javob berish taassurotini beradi, bu ayniqsa internet aloqasi sekinroq bo'lgan hududlarda yoki kamroq quvvatli qurilmalarda foydalidir.</li> <li><b>Qurilmalar bo'ylab izchillik:</b> View Transitions'ning brauzer tomonidan boshqariladigan tabiati turli xil qurilmalar va ekran o'lchamlarida, yuqori aniqlikdagi monitorlardan tortib ixcham mobil ekranlargacha, animatsiya sifatining yanada izchil bo'lishini ta'minlaydi va butun dunyo bo'ylab yagona brend tajribasini taqdim etadi.</li> <li><b>Yoqimli o'zaro ta'sirlar:</b> Nozik, yaxshi ishlab chiqilgan animatsiyalar ilovaning idrok etilgan sifati va professionalligini oshiradi, bu esa foydalanuvchilarning yuqori darajada qoniqishi va jalb etilishiga olib keladi.</li> </ul> <h3>Murakkab UI mantiqini soddalashtirish</h3> <p>Dasturchi nuqtai nazaridan, Element State Capture murakkab UIlarni yaratish vazifasini keskin soddalashtiradi. Bungacha, animatsiyalar paytida dinamik element holatlarini boshqarish ko'pincha mo'rt va ko'p so'zli jarayon bo'lgan, ayniqsa tarqoq jamoalar tomonidan ishlab chiqilgan keng ko'lamli ilovalarda. Dasturchilar endi element ko'rinish o'zgarishi paytida saqlanib qolganda aylantirish pozitsiyalari, kiritilgan qiymatlar yoki dinamik uslublarni saqlash va tiklash uchun andozaviy JavaScript yozishlari shart emas.</p> <p>Bu quyidagilarga olib keladi:</p> <ul> <li><b>Dasturchi samaradorligining oshishi:</b> Qo'lda holatni boshqarishga kamroq vaqt sarflash asosiy ilova mantiqiga va innovatsion xususiyatlarga ko'proq e'tibor qaratishni anglatadi.</li> <li><b>Kodning texnik xizmat ko'rsatish qulayligining yaxshilanishi:</b> CSS'da (`view-transition-name` bilan) yoki oddiy JavaScript chaqiruvlarida (`startViewTransition`) o'tishlarni va holatni saqlashni e'lon qilish kodni toza, o'qilishi oson va turli vaqt zonalari va madaniy kontekstlarda ishlaydigan dasturchilar uchun saqlashni osonlashtiradi.</li> <li><b>Xatolar yuzasining kamayishi:</b> Holatni saqlashni avtomatlashtirish qo'lda holatni saqlash bilan bog'liq ko'plab potentsial xatolarni bartaraf etadi, bu esa yanada ishonchli va barqaror ilovalarga olib keladi.</li> </ul> <h3>Kelajakka bir nazar</h3> <p>CSS View Transitions, xususan Element State Capture, hali ham rivojlanmoqda. Ishchi guruh takomillashtirishlarni faol o'rganmoqda va uning imkoniyatlarini kengaytirmoqda. Biz qaysi aniq holatlar saqlanishi ustidan yanada nozikroq nazorat, yanada yaxshi ishlash uchun brauzer renderlash quvurlari bilan chuqurroq integratsiya va ehtimol yanada murakkab element xususiyatlarini yoki hatto maxsus ma'lumotlar holatlarini animatsiya qilish uchun kengaytmalarni kutishimiz mumkin.</p> <p>Ushbu fundamental texnologiya o'zining suyuqligi va interaktivligi bo'yicha mahalliy ish stoli yoki mobil ilovalar bilan raqobatlasha oladigan, shu bilan birga veb-platformaning ochiqligi va qulayligini saqlab qoladigan yangi davr veb-ilovalari uchun yo'l ochadi. Bu butun dunyodagi dasturchilarga yanada jozibali, foydalanuvchiga qulay va samarali raqamli tajribalar yaratish imkoniyatini beradi va brauzerda nimalar mumkinligining chegaralarini kengaytiradi.</p> <h2>Xulosa</h2> <p>CSS View Transition Capture shunchaki vizual hiyla-nayrang emas; bu UI o'zgarishlari paytida element holatini saqlab qolishdek uzoq vaqtdan beri mavjud bo'lgan muammoni hal qiluvchi veb-ishlab chiqishdagi chuqur yutuqdir. Foydalanuvchi kiritgan ma'lumotlarni, aylantirish pozitsiyalarini va dinamik uslublarni uzluksiz saqlab qolish orqali u dasturchilarga haqiqatan ham tabiiy, sezgir va intuitiv his etiladigan veb-ilovalar yaratish imkonini beradi.</p> <p>Global auditoriya uchun bu ularning qurilmasi, tarmoq sharoitlari yoki madaniy kontekstidan qat'i nazar, yanada izchil, kamroq asabiylashtiruvchi va chinakam yoqimli tajribaga aylanadi. Dasturchilar sifatida CSS View Transitions'ni qabul qilish va uning holatni saqlash imkoniyatlarini o'zlashtirish yuqori darajada interaktiv va foydalanuvchiga yo'naltirilgan veb-ilovalarning keyingi avlodini yaratish uchun juda muhim bo'ladi. Bugunoq `view-transition-name` bilan tajriba o'tkazishni boshlang va o'z loyihalaringizda uzluksiz UI dizaynining yangi o'lchamini oching.</p> </div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">CSS View Transitions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">element holatini saqlash</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">silliq UI o'tishlari</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veb-animatsiya</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">bir sahifali ilovalar</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">SPA</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">foydalanuvchi tajribasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">dasturchi unumdorligi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">brauzerlararo moslik</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">samaradorlikni optimallashtirish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">qulaylik</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiv takomillashtirish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI ishlab chiqish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">front-end ishlab chiqish</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0}; $RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>